<template>
  <div class="skeleton">
    <Container
      class="data-content flex-1"
    >
      <div class="pc-skeleton">
        <div class="inner">
          <div class="search-skeleton">
            <Skeleton fill />
          </div>
          <div class="nav">
            <Skeleton width="100" pc />
            <Skeleton width="100" pc />
            <Skeleton width="100" pc />
            <Skeleton width="100" pc />
          </div>
          <div class="divider-line"></div>
          <div class="list">
            <div v-for="i in 4">
              <div class="header">
                <Skeleton width="400" pc />
                <Skeleton width="40" pc />
              </div>
              <div class="divider-line"></div>
              <div class="control">
                <Skeleton width="250" pc />
                <div class="btns">
                  <Skeleton width="100" height="45" radius="6" />
                  <Skeleton width="100" height="45" radius="6" />
                </div>
              </div>
              <div class="comments">
                <div class="item">
                  <div class="comment-header">
                    <div class="logo">
                      <Skeleton width="50" height="50" round avatar />
                    </div>
                    <div class="info">
                      <Skeleton height="70" width="100" pc />
                      <Skeleton height="70" width="200" pc />
                    </div>
                  </div>
                  <Skeleton :rows="3" pc />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mobile-skeleton">
        <div class="inner">
          <div class="search">
            <Skeleton block height="200" />
          </div>
          <div class="nav">
            <Skeleton height="120" width="300" />
            <Skeleton height="120" width="300" />
            <Skeleton height="120" width="300" />
            <Skeleton height="120" width="300" />
          </div>
          <div class="divider-line"></div>
          <div class="list">
            <div v-for="i in 2">
              <Skeleton width="70%" height="100" />
              <div class="divider-line"></div>
              <div class="control">
                <Skeleton height="100" width="30%" />
                <div class="btns">
                  <Skeleton height="150" width="300" radius="30" />
                  <Skeleton height="150" width="300" radius="30" />
                </div>
              </div>
              <div class="comments">
                <div class="user-info">
                  <Skeleton width="246" height="246" avatar round />
                  <div class="info">
                    <Skeleton mobile width="350" />
                    <Skeleton mobile width="600"/>
                  </div>
                </div>
                <Skeleton :rows="2" mobile/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </div>
</template>

<script setup lang="ts"></script>
<style scoped lang="less">
.skeleton {
  height: calc(100vh - var(--yd-header-height));
  overflow: hidden;
}
.pc-skeleton .header,
.control {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pc-skeleton {
  .search-skeleton {
    width: 400px;
    height: 50px;
    margin-bottom: 20px;
  }
  .nav {
    display: flex;
    gap: 30px;
  }
  .list {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    .control {
      .btns {
        display: flex;
        gap: 20px;
      }
    }
    .comments {
      margin-top: 20px;
      .comment-header {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }
  }
}

.mobile-skeleton {
  .nav {
    display: flex;
    gap: 82px;
    margin-top: 82px;
    & + .divider-line {
      margin: 40px 0;
    }
  }
  .list {
    margin: 150px 0;
    display: flex;
    flex-direction: column;
    gap: 150px;
    .btns {
      display: flex;
      gap: 82px;
    }
    .user-info {
      margin: 82px 0;
      display: flex;
      gap: 62px;
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
  }
}
</style>
